<template>
  <div class="color"></div>
</template>
<script>
export default {
  name: 'Color',
  props: ['color', 'layer'],
  watch: {
    // color: {
    //   handler() {
    //     this.updateStyle();
    //   },
    //   immediate: true,
    //   deep: true,
    // },
    // layer: {
    //   handler() {
    //     this.updateStyle();
    //   },
    //   immediate: true,
    //   deep: true,
    // }
  },
  methods: {
    updateStyle(layer) {
      const { color } = this;
      if (!layer) {
        return
      }
      if (color.field) {
        layer.color(color.field, color.values);
      } else {
        layer.color(color.values);
      }
    },
  },
}
</script>